<template>
  <div class="user-list-container">
    <a-card title="用户管理">
      <a-button type="primary" @click="createUser"> 新增用户 </a-button>
      <span style="margin: 0 10px"></span>
      <a-button type="danger" :disabled="!hasSelected" @click="batchDel">
        批量删除
      </a-button>
      <div style="margin: 20px 0"></div>
      <a-table
        :columns="columns"
        :data-source="dataList"
        :loading="tableLoading"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        rowKey="id"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="updateUserInfo(record)">修改</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除此项？"
            ok-text="确定"
            @confirm="confirmDelete(record.id)"
            cancel-text="取消"
          >
            <a type="danger">删除</a>
          </a-popconfirm>
        </span>
      </a-table>

      <a-modal
        :title="`${userInfo.id ? '修改' : '新增'}用户信息`"
        :visible="updateUserDialog"
        :maskClosable="false"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <a-row :gutter="50">
          <a-col :span="24" v-if="!userInfo.id">
            <div class="form-input-material">
              <input
                class="form-control-material"
                placeholder=" "
                v-model="userInfo.loginName"
              />
              <label>登录名</label>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="form-input-material">
              <input
                class="form-control-material"
                placeholder=" "
                v-model="userInfo.nickName"
              />
              <label>昵称</label>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="form-input-material">
              <input
                class="form-control-material"
                placeholder=" "
                v-model="userInfo.password"
              />
              <label>新密码</label>
            </div>
          </a-col>
        </a-row>
        <template slot="footer">
          <a-button
            key="submit"
            type="primary"
            :loading="loading"
            @click="handleOk"
          >
            {{ `${userInfo.id ? "修改" : "新增"}` }}
          </a-button>
          <a-button key="back" @click="handleCancel"> 取消 </a-button>
        </template>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import {
  getUserList,
  updateUserInfo,
  delUserInfo,
  registerUser
} from "@/api/user";
export default {
  data() {
    return {
      selectedRowKeys: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
          align: "center"
        },
        {
          title: "登录名",
          dataIndex: "loginName",
          key: "loginName",
          align: "center"
        },
        {
          title: "昵称",
          dataIndex: "nickName",
          key: "nickName",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          scopedSlots: { customRender: "action" }
        }
      ],
      dataList: [],
      tableLoading: false,
      updateUserDialog: false,
      loading: false,
      userInfo: {},
      isCreate: false
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    createUser() {
      this.updateUserDialog = true;
      this.userInfo = {};
    },
    async batchDelApi(ids) {
      try {
        const { code, msg } = await delUserInfo(ids);
        if (code == 200) {
          this.getUserList();
          this.$notification.success({
            message: msg
          });
        }
      } catch (error) {}
    },
    async getUserList() {
      this.selectedRowKeys = [];
      this.tableLoading = true;
      try {
        const { code, data } = await getUserList();
        if (code === 200) {
          this.dataList = data;
        }
      } catch (error) {}
      this.tableLoading = false;
    },
    updateUserInfo(row) {
      this.userInfo = row;
      this.updateUserDialog = true;
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    async confirmDelete(id) {
      this.batchDelApi([id]);
    },
    batchDel() {
      this.batchDelApi(this.selectedRowKeys);
    },
    async handleOk() {
      const { password } = this.userInfo;
      if (!password) {
        this.$notification.error({
          message: "请输入密码"
        });
        return;
      }
      this.loading = true;
      if (!this.userInfo.id) {
        const { code, msg } = await registerUser(this.userInfo);
        if (code == 200) {
          this.getUserList();
          this.handleCancel();
          this.$notification.success({
            message: msg
          });
        }
      } else {
        try {
          const { code, msg } = await updateUserInfo(this.userInfo);
          if (code == 200) {
            this.getUserList();
            this.handleCancel();
            this.$notification.success({
              message: msg
            });
          }
        } catch (error) {}
      }

      this.loading = false;
    },
    handleCancel() {
      this.userInfo = {};
      this.loading = false;
      this.updateUserDialog = false;
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  }
};
</script>

<style lang="scss" scoped>
.user-list-container {
  padding-top: 20px;
}

.form-input-material,
.form-check {
  margin: 20px 0 !important;
}
.form-check {
  label {
    margin-right: 10px;
  }
}
</style>
